<template>
  <div class="box">
    <!-- <h1>登录页</h1> -->
    <van-form validate-first @submit="userLogin" @failed="onFailed">
      <!-- 通过 pattern 正则:进行正则校验 -->
      <!-- 通过 validator 进行函数校验 -->
      <van-field
        v-model="uname"
        placeholder="用户名"
        :rules="[{ validator: validator1, message: '用户名至少四位' }]"
      />
      <van-field
        v-model="pwd"
        type="password"
        placeholder="密码"
        :rules="[{ validator: validator2, message: '密码至少八位' }]"
      />
      <div class="login-btn">
        <!-- native-type="button"不会自动提交 -->
        <van-button round block type="info" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>
<script>
import { Toast } from 'vant';
import axios from 'axios';
export default {
  // callback(val)表单验证规则
  data() {
    return {
      uname: '',
      pwd: '',
    };
  },
  methods: {
    //至少4位
    validator1(val) {
      console.log(1);
      return val.length > 1 ? true : false;
    },
    // 校验函数返回 true 表示校验通过，false 表示不通过
    validator2(val) {
      console.log(2);
      //正则检验,布尔值;
      return val.length > 4 ? true : false;
      //   return /1\d{8}/.test(val);
    },
    // 提交时候:
    userLogin() {
      // 先验证,请求服务器...
      // Toast,loading('验证中......');
      // 提示一下
      // this.$toast('验证中...');
      // 全局Vant
      // 登录时网络慢提示一下
      this.$toast.loading('正在验证中...');

      console.log('用户可以登录了');
      // 提交时触发事件,请求提交数据;
      
    //   浏览器的同源策略:发起请求时,必须保证域名,协议,端口都一致,
    //   其中任何一个不同,就会出现不允许跨域操作的错误提示;
    // 正式环境:项目运行:
    //  服务器代码规避;服务器软件ngix
    // vue项目跨域操作;

    // 协议,地址,端口;
        // axios.post('/api/login', {
        //   username: this.uname,
        //   pwd: this.pwd,
        // })
        // .then((res) => {
        //   // 验证成功,code=200,
        //   console.log('请求成功,登录成功', res.data.code);
        //   if (res.data.code === 200) {
        //     // 清除动画,页面跳转;
        //     // location.href='/';
        //     Toast.clear();
        //     // 
        //     this.$router.push({
        //       name: 'Hello',
        //     });
        //   }
        // });

        // 接口
        http.userLogin({
          username:this.uname,
          pwd:this.pwd
        })
        .then(res =>{
          console.log('请求成功,开始登录',res.code);
          if(res.code === 200){
            Toast.clear();
            this.$router.push({
              name:'Hello',
            });
          }
        });
    },
    onFailed(errorInfo) {
      console.log('failed', errorInfo);
    },

    //   <!-- 通过 validator 进行异步函数校验 -->
    //   <van-field v-model="value3" name="asyncValidator" placeholder="异步函数校验"
    //   :rules="[{ validator: asyncValidator, message: '请输入正确内容' }]" />

    // 异步校验函数返回 Promise
    asyncValidator(val) {
      return new Promise((resolve) => {
        Toast.loading('验证中...');

        setTimeout(() => {
          Toast.clear();
          resolve(/\d{6}/.test(val));
        }, 1000);
      });
    },
  },
};
</script>
<style scoped>
.login-btn {
  margin: 1.6rem;
}
</style>